<template>
    <div class="tableWrapper">
        <el-row>
          <el-form :model="searchForm" :inline="true" class="search">
            <el-form-item label="技术原因名称">
              <el-input size="mini" v-model="searchForm.tdjsyySearch" @keyup.enter.native="getJsyyTableList">
              </el-input>
            </el-form-item>
            <el-form-item label="技术原因代码">
              <el-input size="mini" v-model="searchForm.tdjsmSearch" @keyup.enter.native="getJsyyTableList">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" icon="el-icon-search" @click="getJsyyTableList">查询</el-button>
              <el-button size="mini" type="primary" icon="el-icon-refresh-right" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="dwbmTableBtn">
          <el-button
            type="primary"
            icon="el-icon-setting"
            size="mini"
            class="columnBtn"
            @click="cccEvent('show', jsyyColumnTable)"
          >配置列</el-button>
          <el-button class="exportBtn" type="primary" icon="el-icon-download" @click="cccEvent('export', jsyyColumnTable)" size="mini">导 出</el-button>
        </div>
        <div class="tableDiv">
          <el-table :data="jsyyData" ref="tableJsyy" border style="width: 100%;" height="100%" v-loading="loading">
            <template v-for="col in jsyyColumnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="col.id"
                :prop="col.field"
                :label="col.title"
                :min-width="col.minWidth"
                :align="col.align"
                :header-align="col.align"
                :sortable="col.sortable"
                :formatter="col.formatter"
                :fixed="col.fixed"
              ></el-table-column>
            </template>
          </el-table>
          <div v-show="!loading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchForm.current" :page-size="searchForm.size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
        <ccc ref="ccc"></ccc>	
    </div>
</template>
<script>
import { codeModulePrefix } from '../../../../config';
import { getJsyybmTable, getJsyybmGyTable } from '@/api/dmgl/jsyy.js';
import ccc from "@/dialogCommom/ccc";
export default {
    data() {
      return {
        activeName: 'zy',
        searchForm: {
          current: 1,
          size: 10,
          tdjsmSearch: '',
          tdjsyySearch: '',
          tdjsmLike: '',
          jsflLike: ''
        },
        total: 0,
        jsyyData: [],
        loading: false,
        jsyyColumnTable: 'code_jsyybm', // 技术原因编码列配置参数
        jsyyColumnData: [] //技术原因编码表格列数据
      }
    },
    components: {
      ccc
    },
    props: {
      propData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propData: {
        deep: true,
        handler(newVal, oldVal) {
          const that = this
          that.searchForm.tdjsmLike = newVal.tdjsmLike
          that.searchForm.jsflLike = newVal.jsflLike
          that.activeName = newVal.activeName
          if (newVal.activeName == 'zy') {
            that.jsyyColumnTable = 'code_jsyybm'
          } else {
            that.jsyyColumnTable = 'code_jsyybm_gy'
          }
          that.cccEvent("load", this.jsyyColumnTable)
          that.getJsyyTableList()
        }
      }
    },
    mounted() {
      this.cccEvent("load", this.jsyyColumnTable)
      this.getJsyyTableList()
    },
    beforeUpdate () { 
      //解决列配置引发的滚动条问题
      this.$nextTick(()=>{
        this.$refs.tableJsyy.doLayout()
      }) 
  },
    methods: {  
      /** 重置 */
      reset() {
        const that = this
        that.searchForm.tdjsmSearch = ''
        that.searchForm.tdjsyySearch = ''
        that.searchForm.current = 1
        that.searchForm.size = 10
        that.getJsyyTableList()
      },

      /** 获取设备原因编码列表 */
      async getJsyyTableList() {
        const that = this
        that.loading = true
        let res = null
        if (that.activeName == 'zy') {
          res = await getJsyybmTable(that.searchForm)
        } else {
          res = await getJsyybmGyTable(that.searchForm)
        }
        if (res.code == 0) {
          that.jsyyData = res.data.records
          that.total = res.data.total
          that.loading = false
        } else {
          that.$message.error(res.message)
        }
      },

      /** 改变每页条数 */
      handleSizeChange(val) {
        const that = this
        that.searchForm.size = val
        that.getJsyyTableList()
      },

      /** 改变页数 */
      handleCurrentChange(val) {
        const that = this
        that.searchForm.current = val
        that.getJsyyTableList()
      },

      //列配置---临时任务事件---初始化页面
      cccEvent(method, table) {
        if (method === "show") {
          this.$refs.ccc.show(table);
        } else if (method === "load") {
          new Promise((resolve, reject) => {
            this.$nextTick(() => {
              resolve(this.$refs.ccc.load(table));
            });
          }).then(response => {
            this.jsyyColumnData = response;
          });
        } else if (method === "export") {
          let url = ''
          let fileName = ''
          if (this.activeName == 'zy') {
            url = `${codeModulePrefix}/dm-jsyybm/page`
            fileName = '中压技术原因编码'
          } else {
            url = `${codeModulePrefix}/dm-jsyybm-gy/page`
            fileName = '高压技术原因编码'
          }
          let vo = {
            tableCode: table,
            param: this.searchForm,
            url: url,
            method: "POST",
            fileName: fileName,
            total: this.total
          };
          this.$refs.ccc.exportExcel(vo);
        }
      }
    }
}
</script>
<style lang="scss" scoped>
.tableWrapper {
  height: 100%;
}
.tableDiv {
  padding-top: 2px;
  height: calc(100% - 116px)
}

.select /deep/ .el-input--small .el-input__inner {
  width: 90px;
}
.pagination-container {
  padding-top: 6px;
  text-align: center;
}
.dwbmTableBtn {
  text-align: right;
  margin-bottom: 1px;
}
.search /deep/ .el-form-item {
  margin-bottom: 7px;
  margin-top: 0px;
}
.search /deep/ .el-form-item__label {
  line-height: 41px;
}
</style>